<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
    <title>响应式布局</title>
    <style>
        /* 1024 以上 大屏 */
        /* 1024 - 400 平板  */
        /* 400 以下 手机 */
        /* @media screen and (max-width: 800px) and (min-width: 500px) {
            .box{
                background-color: yellow;
            }
        } */
    </style>
</head>
<body>
    <div class="box continer">

        <div class="box item">
            <h3>简洁至上</h3>
            <p>以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。</p>
        </div>
        <div class="box item">
            <h3>Vue 驱动</h3>
            <p>享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。</p>
        </div>
        <div class="box item">
            <h3>高性能</h3>
            <p>VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。</p>
        </div>

    </div>
    <!--  -->

</body>
</html>